<template>
  <div class="article-search-page">
    <div class="lg-container">
      <div class="filter-bar">
        <filter-search
          v-model="formData.typeId"
          :options="typeList"
          title="分类"
          icon="icon-fenlei"
          label-key="name"
          value-key="id"
          @on-change="changeParam"
        ></filter-search>
        <filter-search
          v-model="formData.tagId"
          :options="tagList"
          multiple
          title="标签"
          icon="icon-biaoqian_o"
          label-key="name"
          value-key="id"
          @on-change="changeParam"
        >
        </filter-search>
        <div class="search-bar">
          <el-input
            v-model="formData.keyword"
            placeholder="请输入搜索内容"
            clearable
            @input="searchDebounce"
          ></el-input>
          <!-- <i class="iconfont icon-search"></i> -->
          <!-- <el-button class="search-btn" @click="">搜索</el-button> -->
        </div>
      </div>
      <div class="lg-row">
        <div class="article-sidebar lg-col-md-15">
          <hot-article></hot-article>
        </div>
        <div class="article-container lg-col-md-45">
          <article-list
            :data="articleList"
            :load="initLoad"
            :loading="loading"
            :disabled="disabled"
            :no-more="noMore"
            :search-txt="formData.keyword"
          ></article-list>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, reactive, computed, onMounted, getCurrentInstance } from 'vue'
import ArticleList from '@/components/page/ArticleList/index.vue'
import HotArticle from '@/components/page/HotArticle/index.vue'
import FilterSearch from '@/components/kit/FilterSearch'
import { debounce } from '@/utils/tools'

export default {
  name: 'ArticleSearchPage',
  components: {
    ArticleList,
    HotArticle,
    FilterSearch,
  },
  setup() {
    const proxy = getCurrentInstance().proxy
    const formData = reactive({
      typeId: [''],
      tagId: [''],
      keyword: '',
    })
    const typeList = ref([
      {
        id: '',
        name: '全部',
      },
    ])
    const tagList = ref([
      {
        id: '',
        name: '全部',
      },
    ])
    const articleList = ref([])
    const state = reactive({
      pageNum: 1,
      pageSize: 10,
      count: 0,
    })
    const loading = ref(true)
    const noMore = computed(() => articleList.value.length >= state.count)
    const disabled = computed(() => loading.value || noMore.value)
    async function initLoad() {
      loading.value = true
      try {
        const res = await proxy.$API.article.page({
          pageNum: state.pageNum,
          pageSize: state.pageSize,
          type: formData.typeId[0],
          tags: formData.tagId.join(','),
          keyword: formData.keyword,
          status: 'Published'
        })
        if (state.pageNum === 1) {
          articleList.value = res.data.list
        } else {
          articleList.value = articleList.value.concat(res.data.list)
        }
        state.count = res.data.count
        // 下一页
        if (!noMore.value) {
          state.pageNum += 1
        }
      } catch (error) {

      } finally {
        loading.value = false
      }
    }

    async function loadType() {
      try {
        const res = await proxy.$API.tag.all()
        if (res.data) {
          tagList.value = res.data
          tagList.value.unshift({
            id: '',
            name: '全部',
          })
        }

      } catch (error) {}
    }
    async function loadTag() {
      try {
        const res = await proxy.$API.type.all()
        if (res.data) {
          typeList.value = res.data
          typeList.value.unshift({
            id: '',
            name: '全部',
          })
        }
      } catch (error) {}
    }
    function changeParam() {
      state.pageNum = 1
      articleList.value = []
      initLoad()
    }

    const searchDebounce = debounce(changeParam, 500)
    onMounted(async () => {
      await loadType()
      await loadTag()
      await initLoad()
    })
    return {
      formData,
      typeList,
      tagList,
      changeParam,
      searchDebounce,
      articleList,
      initLoad,
      loading,
      disabled,
      noMore,
    }
  },
}
</script>

<style lang="less">
.article-search-page {
  height: 100%;
  .search-bar {
    display: flex;
    align-items: center;
    padding: 10px;
    // .icon-search {
    //   margin-left: 30px;
    //   font-size: 24px;
    //   color: @colorPrimary;
    // }
    .search-btn {
      margin-left: 20px;
      display: flex;
      align-items: center;
      background: @colorAssist;
      border: none;
      color: #fff;
      .icon-search {
        margin-right: 10px;
      }
    }
  }
  .filter-bar {
    background-color: #fff;
    margin-bottom: 20px;
    padding: 20px 20px 20px 22px;
    position: relative;
    &:after {
      background: @colorCol;
      content: '';
      height: 100%;
      left: 0;
      position: absolute;
      top: 0;
      width: 2px;
    }
  }
  .article-sidebar {
    margin-bottom: 20px;
    display: none;
    @media screen and (min-width: @breakpoints-md) {
      display: block;
    }
  }
}
</style>
